<template>
  <div class="mine">
    <!-- h:262 -->
    <header>
      <div class="user-info">
        <!-- 头像 -->
        <div class="avatar">
          <img :src="userInfo.photo">
        </div>
        <!-- 用户名 -->
        <div class="name">{{ userInfo.name }}</div>
        <div class="info">
          个人信息
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="user-data">
        <div>
          <span>{{ userInfo.art_count }}</span>
          <span>动态</span>
        </div>
        <div>
          <span>{{ userInfo.follow_count }}</span>
          <span>关注</span>
        </div>
        <div>
          <span>{{ userInfo.fans_count }}</span>
          <span>粉丝</span>
        </div>
        <div>
          <span>{{ userInfo.like_count }}</span>
          <span>被赞</span>
        </div>
      </div>
    </header>

    <van-grid
      class="grid"
      :border="false"
    >
      <van-grid-item
        icon="photo-o"
        text="消息通知"
      />
      <van-grid-item
        icon="photo-o"
        text="我的收藏"
      />
      <van-grid-item
        icon="photo-o"
        text="阅读历史"
      />
      <van-grid-item
        icon="photo-o"
        text="我的作品"
      />
    </van-grid>

    <div class="more-service">
      <div class="title">更多服务</div>
      <van-grid
        :border="false"
      >
        <van-grid-item
          icon="photo-o"
          text="意见反馈"
          to="/feedback"
        />
        <van-grid-item
          icon="photo-o"
          text="小智同学"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'MinePage',
  computed: {
    ...mapState('user', [
      'userInfo',
    ]),
  },
  methods: {
    ...mapActions('user', [
      'updateUserInfo',
    ]),
  },
  created() {
    this.updateUserInfo();
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/common.less');
.mine {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;

  header {
    background: linear-gradient(to bottom right, #484674, #a1a4ca);
    padding: 32px 16px 64px;
    color: #fff;
    border-bottom-left-radius: 50% 30px;
    border-bottom-right-radius: 50% 30px;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        .avatar(24px);
        border: 3px solid #7674a1;
      }

      .name {
        flex: 1;
        margin: 0 16px;
        font-size: 22px;
      }
    }

    .user-data {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 32px;

      >div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .grid {
    margin: -48px 16px 16px;
    border-radius: 8px;
    overflow: hidden;
  }

  .more-service {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin: 0 16px;

    .title {
      padding: 16px 0 0 16px;
    }
  }

}
</style>
